<script setup lang="ts">
import { ref } from "vue";
import ColorManager from "../manager/colorManager";
const colorArr = ColorManager.get(0);
defineProps({
    lable: String,
    width: Number,
});
// const width = ref(typeof props.width == 'undefined' ? 120 : props.width);

const colorBor = ref(colorArr.border);
const colorBoxS = ref(colorArr.boxShadow);
const colorBack = ref(colorArr.background);
const colorText = ref(colorArr.text);


</script>

<template>
    <button class="button-ba-root">{{ lable }}</button>
</template>

<style scoped lang="scss">
.button-ba-root {
    padding: 10px 20px;
    border: 1px solid v-bind(colorBor);
    outline: none;
    border-radius: 7px;
    box-shadow: 0 0 5px v-bind(colorBoxS);
    cursor: pointer;
    background-color: white;
    color: v-bind(colorText);
    font-size: 16px;
    height: 40px;
    line-height: 20px;
}

.button-ba-root:hover {
    transition-duration: .2s;
    background-color: v-bind(colorBack);
    color: white;
}

.button-ba-root:active {
    box-shadow: 0 0 0px v-bind(colorBoxS);
}
</style>